<template>
  <div>
    <Drawer
      v-model="value"
      width="1230"
      :styles="styles"
      draggable
      mask-closable
      @on-visible-change="onVisibleChange"
    >
      <cus-card class="bd mt_20" :showTitle="true" title="入库验收详情列表">
        <div class="box">
          <div style="display:flex;">
            <h3 class="mr_120">入库单号: {{ form.storageNo }}</h3>
            <h3 class="mr_120">供应商: {{ form.supplierName }}</h3>
            <h3 class="mr_120">验收员: {{ form.checkName }}</h3>
          </div>
          <!-- <div>
            <Button
            class="mr_24"
            type="warning"
            @click=""
            >导出</Button
          >
          </div> -->
        </div>
        <Table border :loading="loading" :columns="columns" :data="data">
        </Table>
        <div class="cus_page">
          <cus-page
            :data="pages"
            class="mt_20"
            @pageChange="postRecordsDetailApi()"
            simple
          ></cus-page>
        </div>
      </cus-card>
    </Drawer>
  </div>
</template>
  
<script>
import { postRecordsDetail } from "@/api/organ/manager";

export default {
  components: {},
  data() {
    return {
      loading: false,
      value: false,
      ruleValidate: {},
      form: {},
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "物资编码",
          key: "goodsCode",
          align: "center",
        },
        {
          title: "物资种类",
          key: "goodsTypeName",
          align: "center",
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
        },
        {
          title: "规格",
          key: "model",
          align: "center",
        },
        {
          title: "入库数量",
          key: "packagingQty",
          align: "center",
        },
        {
          title: "单位重量(kg)",
          key: "unitWeight",
          align: "center",
        },
        // {
        //   title: "入库重量",
        //   key: "weight",
        //   align: "center",
        // },
        {
          title: "入仓位置",
          key: "stockName",
          align: "center",
        },
        {
          title: "验收时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
        },
      ],
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  mounted() {},
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.pages.page = 1;
      }
    },
    show() {
      this.value = true;
      this.postRecordsDetailApi();
    },
    postRecordsDetailApi() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let params = {
          stockBillId: this.form.id,
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
        };
        postRecordsDetail(params).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.list;
            this.pages.pageTotal = res.data.total;
            resolve(res);
          }
        }).catch((err)=>{
          reject(err)
        })
      });
    },
  },
  component: {},
};
</script>
<style lang="less" scoped>
.content-top {
  padding: 24px 0 0 24px;
}
::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}
.bd {
  border: 1px solid #e3e8ee;
  padding: 10px;
}
.mr_120 {
  margin-right: 120px;
}
.box {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
}
</style>